<template>
	<view>
		<view class="u-demo-block">
			<view class="u-page__tag-item">
				<u-search v-model="value1" :show-action="false" @clickIcon="clickIcon" height="73rpx"
					:actionStyle="{'font-size':'30rpx'}" searchIconSize="64rpx" @search="clickIcon">
				</u-search>
			</view>
		</view>
		<!-- <view v-if="value1===''">
			<view slot="left" class="history">历史记录</view>
			<view slot="right">89
				<view class="isPost" @click="check">
					清空
				</view>
			</view> -->
		<!-- </view> -->
		<u-divider></u-divider>
		<!-- 		<view v-if="current=== 0 "> -->
		<view class="card" v-for="(post,index) in postList" :key="index">
			<singlePost :index=index :showUser="true" :isLiked="likes[index]" :showSetting="false" :user="post.user"
				:post="post" @onClick="onClick($event,post,index)" @clickSetting="setting($event)"
				@updateLikes="updateIsliked" />
		</view>
		<view class="more" v-if="!more">
			到底了~~~
		</view>

	</view>
</template>

<script>
	import config from "@/config/config.js"
	import singlePost from "@/components/single-post.vue"
	export default {
		components: {
			singlePost
		},
		data() {
			return {
				current: 0,
				postTypes: config.postTypes,
				postList: [],
				more: true,
				likes: [],
				value1: ""
			}
		},
		methods: {
			updateIsliked(params) {
				this.$set(this.likes, params.index, params.isLiked)
			},
			clickIcon() {
				if (this.value1 !== '') {
					this.searchAction = true;
					console.log(this.value1);
					this.postList = [];
					this.getPostList(new Date().getTime(), this.value1)
				} else {
					uni.showToast({
						icon: "none",
						title: "请输入搜索关键词!"
					})
				}
			},
			watchPost(pid) {
				uni.navigateTo({
					url: "../post/post?pid=" + pid
				})
			},
			onClick(type, post, index) {
				console.log(type)
				if (["content", 'view', 'comment'].indexOf(type) > -1) this.watchPost(post.pid)
				if (type === "like") this.like(post.pid, index)
				if (type === "unlike") this.unLike(post.pid, index)
				if (type === "user") this.watchUser(post.uid)
			},
			like(pid, index) {
				console.log("like" + pid);
				this.$request.TokenRequest({
					url: "/post/likePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						console.log("点赞成功")
						this.$set(this.likes, index, true)
						this.$set(this.postList[index], "likes", this.postList[index].likes + 1)
						// this.likes[index] = true;
						// this.postList[index].likes += 1;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						uni.navigateBack({})
					}
				})
			},
			unLike(pid, index) {
				console.log("取消点赞" + pid);
				this.$request.TokenRequest({
					url: "/post/UnLikePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						this.$set(this.likes, index, false)
						this.$set(this.postList[index], "likes", this.postList[index].likes - 1)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			watchUser(uid) {
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + uid
				})
			},
			getPostList(date, value) {
				this.$request.TokenRequest({
					url: "/post/getPostListByKeyword"
				}, {
					date: date,
					keyword: value,
				}).then(res => {
					if (res.state === 200) {
						this.postList = this.postList.concat(res.data)
						if (res.message === "false") {
							this.more = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						})
					}
				})
			},
			getLatest() {
				let len = this.postList.length;
				if (len == 0) return new Date().getTime()
				else return new Date(this.postList[len - 1].date).getTime()
			},
		},
		mounted() {
			//TODO:初始化一下likes数组
			for (let i = 0; i < 100; i++) {
				this.likes.push(false)
			}
		},
		onReachBottom() {
			//TODO:获取下面的
			if (this.more) {
				this.getPostList(this.getLatest(), this.value1)
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-search__content__input {
		font-size: 30rpx;
	}

	.u-demo-block {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.u-page__tag-item {
		@include flex(column);
		flex: 1
	}

	.isPost {
		background-color: #ffffff;
		color: #838383;
		font-size: 30rpx;
		padding: 5rpx 18rpx;
		border-radius: 10rpx;
	}


	.more {
		text-align: center;
		padding: 20rpx;
		font-size: 30rpx;
		color: #9a9a9a;
	}

	.card {
		border-bottom: 15rpx solid #F6F6F6;
	}
</style>
